/**
 * Created by yuanchengwuliu on 2017/4/21.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    NavigatorIOS
} from 'react-native';

import Home from './News_Home'
import Message from './News_Message'
import Discover from './News_Discover'
import Mine from './News_Mine'

var Main = React.createClass({

    getInitialState(){
        return{
            tabName:"home"
        }
    },

    render(){
        return(
            <TabBarIOS tintColor="orange">
                <TabBarIOS.Item
                    title="首页"
                    icon={require('./../images/TabBar/tabbar_home@2x.png')}
                    selectedIcon={require('./../images/TabBar/tabbar_home_highlighted@2x.png')}
                    onPress={this.changeTabItem.bind(this,"home")}
                    selected={this.state.tabName === "home"}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute={{
                            component:Home,
                            title:"首页"
                        }}/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="发现"
                    icon={require('./../images/TabBar/tabbar_discover@2x.png')}
                    selectedIcon={require('./../images/TabBar/tabbar_discover_highlighted@2x.png')}
                    onPress={this.changeTabItem.bind(this,"discover")}
                    selected={this.state.tabName === "discover"}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute={{
                            component:Discover,
                            title:"发现"
                        }}/>
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    title="消息"
                    icon={require('./../images/TabBar/tabbar_message_center@2x.png')}
                    selectedIcon={require('./../images/TabBar/tabbar_message_center_highlighted@2x.png')}
                    onPress={this.changeTabItem.bind(this,"message")}
                    selected={this.state.tabName === "message"}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute={{
                            component:Message,
                            title:"消息"
                        }}/>
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    title="我的"
                    icon={require('./../images/TabBar/tabbar_profile@2x.png')}
                    selectedIcon={require('./../images/TabBar/tabbar_profile_highlighted@2x.png')}
                    onPress={this.changeTabItem.bind(this,"profile")}
                    selected={this.state.tabName === "profile"}
                >
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute={{
                            component:Mine,
                            title:"我的"
                        }}/>
                </TabBarIOS.Item>
            </TabBarIOS>
        )
    },

    //选项卡点击
    changeTabItem(tab){
        this.setState({
            tabName:tab
        });
    }
});

var styles = StyleSheet.create({

});

module.exports = Main;